<html>
<head>
	<meta charset='utf-8' />
	<title>便民信息</title>
	<meta http-equiv="keywords" content="求职,招聘,房屋,出租,出售,求租,求购,宠物,二手,二手车,二手物品,旧货,寻物,寻人,出兑,外兑"> 
	<meta http-equiv="description" content="便民信息网,房屋租售,宠物交易,二手物品,二手车辆,寻物寻人,出兑信息">  
	<meta name="description" content="便民信息网,房屋租售,宠物交易,二手物品,二手车辆,寻物寻人,出兑信息"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
	<style>
		@media screen and (max-width:450px){
			#nav_bottom{width:98%;margin:0 auto}
			#content{width:98%;margin:0 auto}
			/*页面宽度900以下时 .abc的宽度为450*/
		}
		@media screen and (min-width:450px){
			#nav_bottom{width:450px;margin:0 auto}
			#content{width:450px;margin:0 auto}
			/*页面宽度900以下时 .abc的宽度为450*/
		}
		.info_item{color:#444;margin:15px 0;display:flex}
		.info_item > div:last-child{flex:1}
	</style>


</head>
<body style='padding:0;margin:0;background:#eee'>
<!-- 1 Content容器 -->
<div id='Content'>


	<!-- 2 顶部广容器-->
	<div style='height:70px;border:1px solid #369;display:flex;text-align:center' id='Advert_Top'>

	</div><!-- 2 顶部广容器结束-->





	<!-- 3 内容区-->
	<div style='margin:10px 0;word-break:break-all;padding:10px;'>

		<div style='margin:10px 0;text-align:center;font:normal bold 18px normal;color:#555'>
			编辑信息
		</div>
		
	

		<!--服务选择-->
		<div class='info_item'>
			<div  >服务选择：</div>
			<div>
				<select style='width:100%;' id='service_list' disabled='disabled' >
				</select>
			</div>
		</div>



		<!--标题-->
		<div class='info_item'>
			<div  >信息标题：</div>
			<div>
				<input style='width:100%' name='title' />
			</div>
		</div>

		<!--联系电话-->
		<div class='info_item'>
			<div >联系电话：</div>
			<div>
				<input style='width:100%' name='phone' />
			</div>
		</div>

		<!--联系人-->
		<div class='info_item'>
			<div >联系人　：</div>
			<div>
				<input style='width:100%' name='contacts' />
			</div>
		</div>

		<!--信息内容-->
		<div class='info_item'>
			<div >信息内容：</div>
			<div>
				<textarea style='width:100%;height:200px;resize:none' name='content'></textarea>
			</div>
		</div>


		<!--图片展示-->
		<div class='info_item'>
			<div >　　　　　</div>
			<div>
				<!--图片区-->
				<div style='display:none'>
					<img id='Detail_Img0' src='' style='width:100%;margin:20px 0' />	
					<div class='img_del' style='color:blue;text-align:right'>删除</div>
				</div>
				<div style='display:none'>
					<img id='Detail_Img1' src='' style='width:100%;margin:20px 0' />	
					<div class='img_del' style='color:blue;text-align:right'>删除</div>
				</div>
				<div style='display:none'>
					<img id='Detail_Img2' src='' style='width:100%;margin:20px 0' />		
					<div class='img_del' style='color:blue;text-align:right'>删除</div>
				</div>
				<div style='display:none'>
					<img id='Detail_Img3' src='' style='width:100%;margin:20px 0' />	
					<div class='img_del' style='color:blue;text-align:right'>删除</div>
				</div>
				<div style='display:none'>
					<img id='Detail_Img4' src='' style='width:100%;margin:20px 0' />	
					<div class='img_del' style='color:blue;text-align:right'>删除</div>
				</div>

			</div>
		</div>


		<!--选择图片-->
		<div class='info_item' style='display:none' id='img_select_area' >
			<div >上传图片：</div>
			<div>
				<input type='file' name='file' id='img_select'   />
			</div>
		</div>



		<!--重发选项-->
		<div class='info_item'>
			<div >自动重发：</div>
			<div>
				<input type='checkbox' name='auto_send'  /> (每天自动重新发布。注意：非自动发布的信息有可能会因排序靠后而导致无法正常显示,请尽量使用自动发布，并及时对失效信息进行删除!)
			</div>
		</div>



		<!--验证码-->
		<div class='info_item'>
			<div >验证码　：</div>
			<div style='display:flex'>
				<div style='flex:1'>
					<input style='width:100%' name='code' />
				</div>
				<div style='flex:2'>
					<span>　</span>
					<img id='Detail_Img2' src='./interface.php?type=code' onclick="this.src=this.src+'&r='+Math.random()" style='height:40px' />
				</div>
			</div>
		</div>



		<div style='text-align:center'>
			<button type='button' id='Submit'>修改</button>
			<button type='button' id='GoBack'>返回</button>
		</div>

	</div>	<!-- 3 内容区结束-->	





	<!--底部广告-->
	<div style='height:80px;border:0px solid red;margin-bottom:45px' id='Advert_Bottom'>

	</div><!--底部广告结束-->

</div><!-- 1 Content容器结束 -->



<div id='notice'></div>



<!--底部导航容器-->
<div id='Nav_Bottom' style='position:fixed;bottom:0;width:100%;height:45px'>

</div><!--底部导航容器结束-->


</body>
</html>

<script src='./Public/jquery.js'></script>
<script src='./Public/fun.js'></script>
<script>
	var obj;
	//获取服务列表数据
	//GetServiceList();

	//加载底部导航栏
	Load_NavBottom('before');

	//alert(document.cookie);
	//检测用户登陆状态，是否跳到login页面
	Check_Login();

	var res_save; 	//保存当前编辑的原数据
	var origin_imgs; //保存原图片的容器
	var origin_imgs2; //原图片的字串，在提交时处理差异的图片，并删除upyun上的实体
	var auto_send; //记录状态，处理时判断是否需要改表
	var info_service;	//记录服务类型，需要处理时加入缓存
	var info_view_time; //记录显示时间，需要处理时加入缓存

	var files = [];	//新增图片的保存容器

	//获取当前编辑的信息
	var iid = GetUrlParm('iid');
	var uid = GetUid('uid');
	var type = 'get_edit_info';
	$.ajax({
		url:'Cache/Detail/'+iid+"?r="+Math.random(),
		type:'post',
		success(res){
			Parse_Res_For_Me_Edit(res);	//解析获取到的详情信息并添加到元素中
		},
		error(){
			Token(type,function(token){
				$.ajax({
					url:url,
					type:'post',
					data:{
						token:token,
						type:type,
						uid:uid,
						iid:iid
					},
					success(res){
						//document.write(res);return;
						//alert(res);
						Parse_Res_For_Me_Edit(res);	//解析获取到的详情信息并添加到元素中
					}
				});
			});
		}
	});


$(function(){


	Set_Title();	//设置页面title
	
	Set_Advert_Top();	//临时设置顶部广告


	//点击修改
	$('#Submit').click(function(){
		var service_type = $('#service_list').find("option:selected").val().trim();	//服务类型
		var title = ChangeChar($('input[name=title]').val().trim());
		var phone = $('input[name=phone]').val().trim();
		var contacts = ChangeChar($('input[name=contacts]').val().trim());
		var content = ChangeChar($('textarea[name=content]').val().trim());
		var code = $('input[name=code]').val().trim();



		//验证各项是否为空
		if(code.length > 4 || code.length < 1){
			alert('验证码不正确！');return;
		}else{
			$.ajax({
				url:url,
				type:'post',
				async:false,
				data:{
					type:'Verify_Code',
					code:code
				},
				success(res){
					if(res == 'err'){
						alert('验证码不正确！');
						$('#code_img').attr('src',$('#code_img').attr('src')+'&r=1');
						exit;
					}
				}
			});
		}
		
		
		if(title.length > 50 || title.length < 1){
			alert('标题在50个字符以内且不得为空！');return;
		}
		if(!/^[1-9][0-9]{5,10}$/.test(phone)){
			alert('电话格式不正确！');return;
		}
		if(contacts.length > 20 || contacts.length < 1){
			alert('联系人在20个字符以内且不得为空！');return;
		}
		if(content.length > 1000 || content.length < 1){
			alert('内容在1000个字符以内且不得为空！');return;
		}
		notice('信息正在提交中......');
		var fd = new FormData();
		fd.append('info_id',GetUrlParm('iid'));
		fd.append('info_uid',GetUid('uid'));		//关联用户id 需要处理
		fd.append('info_title',title);
		fd.append('info_content',content);
		fd.append('info_contacts',contacts);
		fd.append('info_phone',phone);
		fd.append('info_service',info_service);
		fd.append('info_issue_time',res_save.info_issue_time);
		fd.append('info_stat',res_save.info_stat);
		fd.append('uid',obj[1]);	//信息中的uid,在编辑时用来与录前操作用户作比对，预防漏洞
		//fd.append('auto_send',auto_send);	//原重发状态，处理时判断是否需要改表

		if($('input[name=auto_send]').is(':checked')){
			fd.append('info_auto_issue',1);
		}else{
			fd.append('info_auto_issue',0);
		}
		if(files.length > 0){
			for(var i=0;i<files.length;i++){
				fd.append('file'+i,files[i]);
			}
		}


		var type='Info_Submit_Edit';	//设置提交类型
		Token(type,function(token){
			fd.append('token',token);
			fd.append('type',type);
			if(origin_imgs2 && origin_imgs2.length > 0){	//如果有原图就将原图也传送
				var origin_imgs_str = JSON.stringify(origin_imgs);	//将原图片数组转成字串 
				fd.append('origin_imgs',origin_imgs_str);	//将原图地址一同传送
				fd.append('origin_imgs2',origin_imgs2);	//将原图地址一同传送
			}
			if(window.XMLHttpRequest){
			  var rq=new XMLHttpRequest();
			}else{
			  var rq=new ActiveXObject("Microsoft.XMLHTTP");
			}
			rq.open("POST",url,true);  //true为异步,false 为同步
			rq.send(fd);  //发送数据
			rq.onreadystatechange=function(){ //监听状态
				if(rq.readyState==4 && rq.status == 200){
					console.log(rq.responseText);
					//document.write(rq.responseText);return;
				  if(rq.responseText == 'ok'){
					notice();
					sessionStorage.removeItem('me_res');
				  	alert('修改成功！');
				  	location.href='me.html';
				  }else{
				  	alert('信息处理出现异常！');
				  }
				}
			}
		})
	});






	//选择图片事件
	img_select.onchange=function(){
		var file = img_select.files[0];
		if(CheckFile(file) == true){	//判断文件类型及大小
			files.push(file);
			//Loop_File();		//遍历显示新增图片
			//View_Origin_Imgs();	//遍历显示原有图片
			Img_View();
		}else{
			alert('文件类型不正确或大小超限！');
		}
	}



	//图片删除
	$(".img_del").click(function(){
		var origin_index = $(this).prev("img").data('index');
		if(origin_index == undefined){
			var index = $(this).index('.img_del');
			files.splice(index,1);
			Img_View();
		}else{
			origin_imgs.splice(origin_index,1);
			Img_View();
		}
	});


	//返回
	$("#GoBack").click(function(){
		location.href='me.html'		
	});


});

	
//遍历图片容器并加载图片
function Loop_File(){
	$('.img_del').prev('img').attr('src','');		//置空所有图片元素src
	$('.img_del').parent().hide();		//隐藏所有图片父容器,以便重新加载
	for(var i=0;i<files.length;i++){	//遍历图片数组
		Load_Img(files[i],i);
	}
}
//加载亲添图片到页面元素中
function Load_Img(file,i){
	$('.img_del').prev('img').attr('src','');
	var reader = new FileReader();
	reader.onloadend=function(){
		//document.write(reader.result+"<br><br><br>");
		$("#Detail_Img"+i).attr('src',reader.result).parent().show();
	}
	reader.readAsDataURL(file);
}

function Img_View(){
	if(origin_imgs){
		if((files.length + origin_imgs.length) >= 5){			//判断图片数量，是否隐藏选择图片按钮
			$('#img_select_area').hide();
		}else{
			$('#img_select_area').show();
		}
	}else{
		if(files.length >= 5){			//判断图片数量，是否隐藏选择图片按钮
			$('#img_select_area').hide();
		}else{
			$('#img_select_area').show();
		}
	}
	$('.img_del').prev('img').attr('src','');
	Loop_File();
	View_Origin_Imgs();
}

	


//遍历并加载原图片到元素中
function View_Origin_Imgs(){
	var origin_start = 5 - origin_imgs.length;
	for(var i=origin_start;i<5;i++){
		var origin_index = 5-i-1;
		$("#Detail_Img"+i).attr('src',origin_imgs[origin_index]).data('index',origin_index).parent().show();
	}
}




//解析获取到的详情信息并添加到元素中
function Parse_Res_For_Me_Edit(res){
/*
	["1023","1","8","38da5","dcd169d618d4991b5abb","0b60328c9f71b41","2222222222",null,"xian","1","0","2","1527517881"]
	[0]info_id,
	[1]info_uid 
	[2]info_service,
	[3]info_title,
	[4]info_content,
	[5]info_contacts,
	[6]info_phone,
	[7]info_imgs,
	[8]info_city_xian,
	[9]info_stat,
	[10]info_auto_issue,
	[11]info_issue_time
*/
	if(res && res != 'err'){
		obj = JSON.parse(res);
		if(GetUid('uid') != obj[1]){	//判断当前编辑的信息是否匹配当前用户
			history.go(-1);return;
		}
		res_save = obj;	//将要编辑的原数据保存，提交时有些数据需要原数据

		//根据服务类型显示服务名
		GetServiceList(function(){
			var service_type=JSON.parse(sessionStorage.service_type);
			for(var i=0;i<service_type.length;i++){
				if(obj[2] == service_type[i][0]){
					$("#service_list").html("<option value='"+service_type[i][0]+"' >"+service_type[i][1]+"</option>");
				}
			}
		});
//		$("#service_list").html("<option value='"+obj.info_service+"' >"+obj.info_service+"</option>");
		$("input[name=title]").val(ChangeChar(obj[3],1));
		$("input[name=phone]").val(obj[6]);
		$("input[name=contacts]").val(ChangeChar(obj[5],1));
		$("textarea[name=content]").val(ChangeChar(obj[4],1));
		auto_send = obj[10];
		info_service = obj[2];
		if(obj[10] == 1){
			$("input[name=auto_send]").attr('checked',true);
		}
		if(obj[7].length > 0){
			origin_imgs2 = obj[7];
			origin_imgs = JSON.parse(obj[7]);
			View_Origin_Imgs();
		}
	}else{
		alert('出现异常！');
	}
}

</script>












